<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <link rel="stylesheet" href="assets/css/styles.css" />
    <link rel="icon" href="/favicon.jpg" type="image/x-icon" />
    <!-- =====BOX ICONS===== -->
    <link
      href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.15.3/css/all.css"
      rel="stylesheet"
    />
    <link
      rel="stylesheet"
      href="//at.alicdn.com/t/font_2791089_jipt64000yc.css"
    />
    <link
      href="https://cdn.jsdelivr.net/npm/boxicons@2.0.5/css/boxicons.min.css"
      rel="stylesheet"
    />

    <title>陈晓辉的个人简历</title>
  </head>

  <body>
    <!--===== HEADER =====-->
    <header class="l-header">
      <nav class="nav bd-grid">
        <div>
          <a href="#" class="nav__logo">晓辉</a>
        </div>

        <div class="nav__menu" id="nav-menu">
          <ul class="nav__list">
            <li class="nav__item">
              <a href="#home" class="nav__link active">主页</a>
            </li>
            <li class="nav__item">
              <a href="#about" class="nav__link">关于</a>
            </li>
            <li class="nav__item">
              <a href="#skills" class="nav__link">技能</a>
            </li>
            <li class="nav__item">
              <a href="#work" class="nav__link">作品</a>
            </li>
          </ul>
        </div>

        <div class="nav__toggle" id="nav-toggle">
          <i class="bx bx-menu"></i>
        </div>
      </nav>
    </header>

    <main class="l-main">
      <!--===== HOME =====-->
      <section class="home bd-grid" id="home">
        <div class="home__data">
          <h1 class="home__title">
            Hi,<br />我是 <span class="home__title-color">晓辉</span><br />
            Web developer
          </h1>

          <a href="tel:18975664428" class="button">联系我</a>
        </div>

        <div class="home__social">
          <a
            href="https://blog.csdn.net/qq_45955832"
            target="_blank"
            class="home__social-icon"
            ><i class="iconfont icon-csdn"></i
          ></a>
          <a
            href="https://gitee.com/chen-xiaohui1914"
            class="home__social-icon"
            target="_blank"
            ><i class="iconfont icon-gitee-fill-round"></i
          ></a>
          <a href="#" class="home__social-icon wechat"
            ><i class="iconfont icon-weixin1"></i
          ></a>
        </div>

        <div class="home__img">
          <svg
            viewBox="0 0 200 200"
            xmlns="http://www.w3.org/2000/svg"
            class="home_blob"
          >
            <path
              fill="#3e6ff4"
              d="M47.8,-64.3C62.4,-55.2,75,-41.8,79.7,-26.2C84.4,-10.5,81.2,7.4,74.1,22.5C67,37.5,56,49.7,43,58.4C30,67.2,15,72.4,-0.6,73.3C-16.3,74.2,-32.5,70.7,-45.6,62C-58.7,53.3,-68.6,39.4,-75.6,23.3C-82.5,7.2,-86.4,-11.1,-81.1,-26C-75.8,-41,-61.2,-52.6,-46.2,-61.6C-31.1,-70.5,-15.6,-76.8,0.5,-77.5C16.6,-78.2,33.2,-73.4,47.8,-64.3Z"
              transform="translate(100 100)"
            />
            <image
              class="home_blob-img"
              x="25"
              y="50"
              href="assets/img/perfil.png"
            />
          </svg>
        </div>
      </section>

      <!--===== ABOUT =====-->
      <section class="about section" id="about">
        <h2 class="section-title">关于</h2>

        <div class="about__container bd-grid">
          <div class="about__img">
            <img src="assets/img/work_5.jpg" alt="" />
          </div>

          <div>
            <h2 class="about__subtitle">我是陈晓辉</h2>
            <p class="about__text">一个前端小白。</p>
          </div>
        </div>
      </section>

      <!--===== SKILLS =====-->
      <section class="skills section" id="skills">
        <h2 class="section-title">技能</h2>

        <div class="skills__container bd-grid">
          <div>
            <h2 class="skills__subtitle">Profesional Skills</h2>
            <p class="skills__text">
              我熟练使用CSS/Javascript和Vue2/Vue3 及其全家桶(vue-router, vuex,
              vite, vue-cli)，并对后端有一定的了解。
            </p>
            <div class="skills_content">
              <div class="skills_header">
                <i class="iconfont icon-code skills_fronticon"></i>
                <h3>前端开发</h3>
                <i class="iconfont icon-jiantoushang skills_arrow"></i>
              </div>
              <div class="skills_info">
                <div class="skills__data">
                  <div class="skills__names">
                    <i class="bx bxl-html5 skills__icon"></i>
                    <span class="skills__name">HTML5</span>
                  </div>
                  <div>
                    <span class="skills__percentage">95%</span>
                  </div>
                </div>
                <div class="bar_box">
                  <div class="skills__bar skills__html"></div>
                </div>
              </div>
              <div class="skills_info">
                <div class="skills__data">
                  <div class="skills__names">
                    <i class="bx bxl-css3 skills__icon"></i>
                    <span class="skills__name">CSS3</span>
                  </div>
                  <div>
                    <span class="skills__percentage">85%</span>
                  </div>
                </div>
                <div class="bar_box">
                  <div class="skills__bar skills__css"></div>
                </div>
              </div>
              <div class="skills_info">
                <div class="skills__data">
                  <div class="skills__names">
                    <i class="bx bxl-javascript skills__icon"></i>
                    <span class="skills__name">JAVASCRIPT</span>
                  </div>
                  <div>
                    <span class="skills__percentage">65%</span>
                  </div>
                </div>
                <div class="bar_box">
                  <div class="skills__bar skills__js"></div>
                </div>
              </div>
              <div class="skills_info">
                <div class="skills__data">
                  <div class="skills__names">
                    <i class="iconfont icon-vuejs-line skills__icon"></i>
                    <span class="skills__name">Vue2 / Vue3 全家桶</span>
                  </div>
                  <div>
                    <span class="skills__percentage">85%</span>
                  </div>
                </div>
                <div class="bar_box">
                  <div class="skills__bar skills__vue"></div>
                </div>
              </div>
              <div class="skills_info">
                <div class="skills__data">
                  <div class="skills__names">
                    <i class="iconfont icon-xiazai1 skills__icon"></i>
                    <span class="skills__name">Element UI</span>
                  </div>
                  <div>
                    <span class="skills__percentage">75%</span>
                  </div>
                </div>
                <div class="bar_box">
                  <div class="skills__bar skills__elem"></div>
                </div>
              </div>
            </div>
            <div class="skills_content skills_close">
              <div class="skills_header">
                <i class="iconfont icon-server-3"></i>
                <h3>后端开发</h3>
                <i class="iconfont icon-jiantoushang skills_arrow"></i>
              </div>
              <div class="skills_info">
                <div class="skills__data">
                  <div class="skills__names">
                    <i class="bx bxl-html5 skills__icon"></i>
                    <span class="skills__name">Node js</span>
                  </div>
                  <div>
                    <span class="skills__percentage">65%</span>
                  </div>
                </div>
                <div class="bar_box">
                  <div class="skills__bar skills__node"></div>
                </div>
              </div>
              <div class="skills_info">
                <div class="skills__data">
                  <div class="skills__names">
                    <i class="bx bxl-css3 skills__icon"></i>
                    <span class="skills__name">Express</span>
                  </div>
                  <div>
                    <span class="skills__percentage">75%</span>
                  </div>
                </div>
                <div class="bar_box">
                  <div class="skills__bar skills__ex"></div>
                </div>
              </div>
              <div class="skills_info">
                <div class="skills__data">
                  <div class="skills__names">
                    <i class="bx bxl-javascript skills__icon"></i>
                    <span class="skills__name">MongoDB</span>
                  </div>
                  <div>
                    <span class="skills__percentage">65%</span>
                  </div>
                </div>
                <div class="bar_box">
                  <div class="skills__bar skills__db"></div>
                </div>
              </div>
            </div>
          </div>

          <div>
            <img src="assets/img/work_4.jpg" alt="" class="skills__img" />
          </div>
        </div>
      </section>

      <!--===== WORK =====-->
      <section class="work section" id="work">
        <h2 class="section-title">作品</h2>

        <div class="mobile work__container bd-grid">
          <div class="work__img work__image">
            <a href="https://jiaqicoder.com/fireblogs" target="_blank"
              ><img src="assets/img/work1.jpg" alt=""
            /></a>
          </div>
          <div class="work__img work__image">
            <a href="https://jiaqicoder.com/VueShop" target="_blank"
              ><img src="assets/img/work2.jpg" alt=""
            /></a>
          </div>
          <div class="work__img work__image">
            <a href="https://jiaqicoder.com/travel-site/" target="_blank"
              ><img src="assets/img/work3.jpg" alt=""
            /></a>
          </div>
        </div>
        <div class="pc wrapper">
          <ul class="carousel_list">
            <li class="work__image">
              <a
                href="https://chen-xiaohui1914.gitee.io/firebase-3/#/"
                target="_blank"
                ><img src="assets/img/work1.jpg" alt=""
              /></a>
            </li>
            <li class="work__image">
              <a
                href="http://chen-xiaohui1914.gitee.io/vue_shop/#/login"
                target="_blank"
                ><img src="assets/img/work2.jpg" alt=""
              /></a>
            </li>
            <li class="work__image">
              <a href="" target="_blank"
                ><img src="assets/img/work3.jpg" alt=""
              /></a>
            </li>
            <li class="work__image">
              <a
                href="https://chen-xiaohui1914.gitee.io/firebase-3/#/"
                target="_blank"
                ><img src="assets/img/work1.jpg" alt=""
              /></a>
            </li>
          </ul>
          <div class="button_wrap">
            <button class="button button-left">
              <i class="fas fa-arrow-left"></i>
            </button>
            <button class="button button-right">
              <i class="fas fa-arrow-right"></i>
            </button>
          </div>
          <ol class="circles">
            <li data-n="0" class="active"></li>
            <li data-n="1"></li>
            <li data-n="2"></li>
          </ol>
        </div>
      </section>
    </main>

    <!--===== FOOTER =====-->
    <footer class="footer">
      <p class="footer__title">Xiaohui Coder</p>
      <a
        href="https://blog.csdn.net/qq_45955832"
        target="_blank"
        class="footer__icon"
        ><i class="iconfont icon-icon_csdn"></i
      ></a>
      <a
        href="https://gitee.com/chen-xiaohui1914"
        class="footer__icon"
        target="_blank"
      >
        <i class="iconfont icon-gitee"></i
      ></a>
      <a href="#" class="footer__icon wechat"
        ><i class="iconfont icon-shuyi_weixin"></i
      ></a>
      <p>&#169; 2022 copyright all right reserved</p>
    </footer>

    <!-- mask -->
    <div class="mask isShow">
      <div class="imgbox">
        <i class="iconfont icon-times cancel"></i>
        <img src="./assets/img/qr.jpg" alt="" />
      </div>
    </div>

    <!--===== SCROLL REVEAL =====-->
    <script src="https://unpkg.com/scrollreveal"></script>

    <!--===== MAIN JS =====-->
    <script src="assets/js/main.js"></script>
  </body>
</html>
